.triangle() {
    .triangle {
        display: inline-block;
        vertical-align: middle;
        width: 8px;
        height: 8px;
    }

    .triangle-down {
        width: 0;
        height: 0;
        border-top: 8px solid rgba(30, 30, 30, 0.6);;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }
     
    .triangle-up {
        width: 0;
        height: 0;
        border-right: 4px solid transparent;
        border-bottom: 8px solid rgba(30, 30, 30, 0.6);
        border-left: 4px solid transparent;
    }
     
    .triangle-right {
        width: 0;
        height: 0;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 8px solid rgba(30, 30, 30, 0.6);
    }
     
    .triangle-left {
        width: 0;
        height: 0;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-right: 8px solid rgba(30, 30, 30, 0.6);;
    }
}